<!-- 
    主页轮播
 -->
<template>
  <div>
    <Title-l>
      <template #name>
        share
      </template>
    </Title-l>
    <nut-swiper :init-page="page" height="150" 
    class="swiper" style="height:150px;"
    direction="vertical" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({
      page: 2,
    });
    return { ...toRefs(state) };
  }
};
</script>
<style lang="scss" scoped>
.swiper{
  border-radius: 5px;
  overflow: hidden;
}
.nut-swiper-inner {

  img {
    width: 100%;
    height: 100%;
  }
  
}
:deep(.nut-swiper-pagination i) {
    height: 20px!important;
  }
</style>
  